<template>
  <div class="user-info-container">
    <MMNavBar title="我的资料" back="/my"></MMNavBar>
    <div class="main-container">
      <MMCell title="头像" class="active-cell" @click="toEditInfo('avatar')">
        <img :src="avatarUrl" alt="" class="active" />
      </MMCell>
      <div class="cell-box">
        <MMCell
          :value="userInfo.nickname"
          title="昵称"
          @click="toEditInfo('nickname')"
        ></MMCell>
        <MMCell :value="genderText" @click="showGender" title="性别"></MMCell>
        <MMCell :value="areaText" title="地区" @click="showArea"></MMCell>
        <MMCell
          :value="userInfo.intro"
          title="个人简介"
          @click="toEditInfo('intro')"
        ></MMCell>
      </div>
      <!-- 退出按钮 -->
      <van-button class="logout-btn" type="default" @click="logOut" block
        >退出登录</van-button
      >
    </div>
    <!-- 性别弹窗 -->
    <van-popup v-model="isShowGender" round position="bottom">
      <van-picker
        ref="genderPicker"
        show-toolbar
        :columns="genderColumns"
        @cancel="isShowGender = false"
        @confirm="onGenderConfirm"
      />
    </van-popup>
    <!-- 省市区弹窗 -->
    <van-popup v-model="isShowArea" round position="bottom">
      <van-area
        ref="areaPicker"
        title="标题"
        columns-num="2"
        @cancel="isShowArea = false"
        @confirm="onAreaConfirm"
        :area-list="areaList"
      />
    </van-popup>
  </div>
</template>

<script>
import MMNavBar from '@/components/MMNavBar'
import MMCell from '@/components/MMcell'
import { mapState, mapGetters, mapMutations } from 'vuex'
import { editUserInfo } from '@/api/my'
import areaList from '../../utils/area'
import { removeToken } from '../../utils/token'
export default {
  name: 'user-info-container',
  data () {
    return {
      isShowGender: false,
      isShowArea: false,
      areaList,
      genderColumns: ['未知', '帅哥', '女的']
    }
  },
  components: {
    MMNavBar,
    MMCell
  },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['avatarUrl', 'genderText', 'areaText'])
  },
  methods: {
    ...mapMutations(['CHANGEPROP', 'CHANGEUSERINFO', 'CHANGEISLOGIN']),
    showGender () {
      this.isShowGender = true
      this.$nextTick(() => {
        this.$refs.genderPicker.setColumnValue(0, this.genderText)
      })
    },
    showArea () {
      this.isShowArea = true
      this.$nextTick(() => {
        this.$refs.areaPicker.reset(this.userInfo.area)
      })
    },
    onGenderConfirm (value, index) {
      this.$toast.loading('修改中')
      this.isShowGender = false
      editUserInfo({ gender: index }).then(res => {
        if (res.data.code === 200) {
          this.$toast.success('修改成功!')
          // 修改仓储
          this.CHANGEPROP({
            propName: 'gender',
            propValue: index
          })
        }
      })
    },
    onAreaConfirm (data) {
      this.isShowArea = false
      this.$toast.loading('修改中')
      editUserInfo({ area: data[1].code }).then(res => {
        if (res.data.code === 200) {
          this.$toast.success('修改成功')
          this.CHANGEPROP({
            propName: 'area',
            propValue: data[1].code
          })
        }
      })
    },
    toEditInfo (prop) {
      this.$router.replace(`/editInfo?prop=${prop}`)
    },
    logOut () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否退出登录?'
        })
        .then(() => {
          removeToken()
          this.CHANGEUSERINFO({})
          this.CHANGEISLOGIN(false)
          this.$router.replace('/login')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less">
.user-info-container {
  background-color: @bg-color;
  .main-container {
    margin: 18px 15px 10px 15px;
    .active-cell {
      border-radius: 8px;
      margin-bottom: 10px;
      .active {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: relative;
        top: 5px;
      }
    }
    .cell-box {
      border-radius: 8px;
      overflow: hidden;
    }
    .logout-btn {
      margin-top: 15px;
      border-radius: 8px;
      .van-button__text {
        color: @main-color;
      }
    }
  }
}
</style>
